<template>
  <div class="details-bottom">
    <div class="bottom-list"
         v-for="(item, index) in bottomList"
         v-if="index !== 2"
         :key="index">
      <div class="list-left">{{item.left}}</div>
      <div class="list-right">{{item.right}}</div>
    </div>
    <div class="pay-way"
         v-else>
      <div class="pay-way-way">{{payTypeText}}</div>
      <div class="pay-way-info">
        <div class="tip">支付明细</div>
        <div class="price">{{detailsData.orderamount | math-money}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins'
import {money} from '@/_util'
export default {
  mixins: [mixins],
  name: 'details-bottom',
  data () {
    return {
      bottomList: []
    }
  },
  computed: {
    payTypeText () {
      switch (this.detailsData.paytype - '0') {
        case 0:
          return '微信'
        case 1:
          return '银联'
        case 2:
          return '线下支付'
      }
    }
  },
  watch: {
    detailsData: {
      immediate: true,
      deep: true,
      handler (val) {
        this.initList()
      }
    }
  },
  methods: {
    spwanObj (left, right) {
      this.bottomList.splice(this.bottomList.length, 0, {left: left, right: right})
    },
    initList () {
      this.bottomList = []
      this.spwanObj('折扣', `${this.detailsData.discount}折`)
      this.spwanObj('商品金额', `共${this.detailsData.totalnum}件，${money(this.detailsData.orderamount)}`)
      this.spwanObj('共计', money(this.detailsData.orderamount))
      this.spwanObj('', '')
      this.spwanObj('订单编号', this.detailsData.paynumber)
      this.spwanObj('下单时间', this.detailsData.underdate)
      let status = this.detailsData.orderstatus - '0'
      if (status === 5) {
        this.spwanObj('取消时间', this.detailsData.canceldate)
        return
      }
      if (status !== 0) {
        this.spwanObj('付款时间', this.detailsData.paydate)
      }
      if (status > 1) {
        this.spwanObj('发货时间', this.detailsData.sendtime)
      }
      if (status > 2) {
        this.spwanObj('收货时间', this.detailsData.taketime)
      }
      if (status > 3) {
        this.spwanObj('完成时间', this.detailsData.finishdate)
      }
    }
  },
  props: {
    detailsData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  mounted () {
    this.initList()
  }
}
</script>

<style lang="stylus" scoped>
.details-bottom {
  background: white;

  // margin-bottom: 150px;
  .bottom-list {
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 30px;

    .list-left {
      font-size: 28px;
      color: rgba(51, 51, 51, 1);
    }

    .list-right {
      font-size: 28px;
      color: rgba(51, 51, 51, 1);
      display: flex;
      flex: 1;
      justify-content: flex-end;
    }
  }

  .pay-way {
    display: flex;
    padding-top: 17px;
    padding-left: 70px;
    padding-right: 30px;
    padding-bottom: 30px;
    background: RGBA(248, 248, 248, 1);

    .pay-way-way {
      display: flex;
      align-items: flex-end;
      font-size: 26px;
      color: rgba(51, 51, 51, 1);
    }

    .pay-way-info {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      font-size: 26px;
      color: rgba(51, 51, 51, 1);
      flex-direction: column;

      // background: RGBA(248, 248, 248, 1);
      .tip {
      }

      .price {
        margin-top: 22px;
      }
    }
  }
}
</style>
